<template>
    <el-dialog
        v-model="userAddOrUpdateDialogVisible"
        :title="title"
        width="30%"
        align-center
        :show-close="false"
        :close-on-click-modal="false"
    >
        <div class="formContainer">
            <el-form :model="userDataForm" :rules="userRules" ref="userDataFormRef">
                <el-form-item label="账号" label-width="20%" prop="userAccount">
                    <el-input v-model="userDataForm.userAccount" placeholder="账号" clearable />
                </el-form-item>
                <el-form-item label="昵称" label-width="20%" prop="userNickName">
                    <el-input v-model="userDataForm.userNickName" placeholder="昵称" clearable />
                </el-form-item>
                <el-form-item label="密码" label-width="20%" prop="userPassword">
                    <el-input v-model="userDataForm.userPassword" placeholder="密码" clearable :disabled="userDataForm.id !== ''"/>
                </el-form-item>
                <el-form-item label="手机号" label-width="20%" prop="userPhone">
                    <el-input v-model="userDataForm.userPhone" placeholder="手机号" clearable />
                </el-form-item>
                <el-form-item label="邮箱" label-width="20%" prop="userEmail">
                    <el-input v-model="userDataForm.userEmail" placeholder="邮箱" clearable />
                </el-form-item>
                <el-form-item label="gitee主页" label-width="20%" prop="giteePath">
                    <el-input v-model="userDataForm.giteePath" placeholder="gitee主页" clearable />
                </el-form-item>
                <el-form-item label="github主页" label-width="20%" prop="githubPath">
                    <el-input v-model="userDataForm.githubPath" placeholder="github主页" clearable />
                </el-form-item>
                <el-form-item label="QQ" label-width="20%" prop="qqNum">
                    <el-input v-model="userDataForm.qqNum" placeholder="QQ" clearable />
                </el-form-item>
                <el-form-item label="微信" label-width="20%" prop="wechatNum">
                    <el-input v-model="userDataForm.wechatNum" placeholder="微信" clearable />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancelDialog()">取 消</el-button>
                <el-button type="primary" :loading="saveLoading" @click="submitDialog()">
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
import {userInfoCreate, userInfoQuery, userInfoUpdate} from "@/request/user";
import {ElNotification} from "element-plus";

export default {
    name: "UserAddOrUpdateDialog",
    props: ['title', 'userDataForm'],
    data() {
        return {
            userRules: {
                userAccount: [{ required: true, message: '账号不能为空', trigger: 'blur' }],
                userNickName: [{ required: true, message: '昵称不能为空', trigger: 'blur' }],
                userPassword: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
            },
            saveLoading: false
        }
    },
    methods: {
        cancelDialog() {
            this.$store.commit('changeUserAddOrUpdateDialogVisible', false);
        },
        submitDialog() {
            this.saveLoading = true
            let formEl = this.$refs['userDataFormRef']
            if (!formEl) return
            formEl.validate((valid) => {
                if (valid) {
                    if (this.userDataForm.id === '') {
                        // 添加用户
                        userInfoCreate(this.userDataForm).then(res => {
                            if (res.code === '200') {
                                ElNotification({
                                    title: 'Success',
                                    message: res.message,
                                    type: 'success'
                                });
                                userInfoQuery(this.userSearchData).then(res => {
                                    this.$store.commit('changeUserDataList', res.data)
                                })
                                this.$store.commit('changeUserAddOrUpdateDialogVisible', false);
                            }
                            this.saveLoading = false
                        }).catch(res => {
                            this.saveLoading = false
                        })
                    } else {
                        // 修改用户
                        userInfoUpdate(this.userDataForm).then(res => {
                            if (res.code === '200') {
                                ElNotification({
                                    title: 'Success',
                                    message: res.message,
                                    type: 'success'
                                });
                                userInfoQuery(this.userSearchData).then(res => {
                                    this.$store.commit('changeUserDataList', res.data)
                                })
                                this.$store.commit('changeUserAddOrUpdateDialogVisible', false);
                            }
                            this.saveLoading = false
                        }).catch(res => {
                            this.saveLoading = false
                        })
                    }
                } else {
                    return false;
                }
            })
        }
    },
    computed: {
        userAddOrUpdateDialogVisible() {
            return this.$store.state.userAddOrUpdateDialogVisible;
        },
        userSearchData() {
            return this.$store.state.userSearchData;
        }
    }
}
</script>

<style scoped lang="less">

</style>